import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Image,
  Platform,
} from 'react-native';
import PxToDp from '../../../utils/PxToDp';
import NavCon from '../../Public/NavCon';

/* global ws */
const scenes = [
  { id: '0', text: '默认', vaule: 'default' },
  { id: '1', text: '月球', vaule: 'moon' },
  { id: '2', text: '悬崖', vaule: 'sence' },
];

const colors = [
  { id: '0', value: '#521112', colorid: 'red', text: '闪光霓虹' },
  { id: '1', value: '#d4d4d4', colorid: 'white', text: '闪光月光白' },
  { id: '2', value: '#101820', colorid: 'black', text: '闪光最贵黑' },
  { id: '3', value: '#403831', colorid: 'p_brown', text: '帕米尔棕' },
  // { id: '4', value: '#313334', colorid: 'grey', text: '安迪斯灰' },
  // { id: '5', value: '##3c271a', colorid: 'b_brown', text: '大地棕' },
];

const skylights = [
  { id: '0', text: '全景', img: require('../../../img/online/skylight.jpg') },
  { id: '1', text: '无', img: require('../../../img/online/noSkylight.jpg') },
];

const callipers = [
  { id: '0', text: '红色卡钳', img: require('../../../img/online/oRedCallipers.jpg') },
  { id: '1', text: '银色卡钳', img: require('../../../img/online/oSilvCalliper.jpg') },
];

const hub = [
  { id: '0', text: '18寸轮毂', img: require('../../../img/online/oCs95Lun18.jpg'), value: 18 },
  { id: '1', text: '19寸轮毂', img: require('../../../img/online/oCs95Lun19.jpg'), value: 19 },
];

const glass = [
  { id: '0', text: '有隐私玻璃', img: require('../../../img/online/oGlass.jpg'), value: 0 },
  { id: '1', text: '无隐私玻璃', img: require('../../../img/online/oNoGlass.jpg'), value: 1 },
];

const flower = [
  { id: '0', text: '一度空间', img: require('../../../img/online/oFlower1.jpg'), value: 'd' },
  { id: '1', text: '极速赛道', img: require('../../../img/online/oFlower2.jpg'), value: 'a' },
  { id: '2', text: '魅力光影', img: require('../../../img/online/oFlower3.jpg'), value: 'b' },
  { id: '3', text: '城市丛林', img: require('../../../img/online/oFlower4.jpg'), value: 'c' },
];

class ColorButton extends Component {
  render() {
    const borderColor = this.props.selected ? '#f65252' : '#ddd';
    return (
      <TouchableOpacity
        style={[styles.cbBorder, { borderColor }]}
        activeOpacity={0.6}
        onPress={() => this.props.onPress()}
      >
        {this.props.selected ? this.props.children : null}
        <View style={[styles.colorShow, { backgroundColor: this.props.bgColor }]} />
      </TouchableOpacity>
    );
  }
}

// 场景切换
class Scene extends Component {
  render() {
    const borderColor = this.props.selected ? '#f65252' : '#ddd';
    return (
      <TouchableOpacity
        activeOpacity={0.6}
        style={[styles.scene, { borderColor }]}
        onPress={() => this.props.onPress()}
      >
        <Text>{this.props.sceneName}</Text>
      </TouchableOpacity>
    );
  }
}

// 天窗
class Skylight extends Component {
  render() {
    return (
      <View>
        <TouchableOpacity
          style={styles.right}
          onPress={() => this.props.onPress()}
        >
          <Image style={styles.car} source={this.props.skyImg} />
        </TouchableOpacity>
        <Text style={styles.top}>{this.props.sceneName}</Text>
      </View>
    );
  }
}

class SwitchSettings extends Component {
  constructor(props) {
    super(props);

    this.state = {
      scene: [false, false, false],
      colorButton: [false, false, false],
      skylight: [false, false],
      callipers: [false, false],
      hub: [false, false],
      glass: [false, false],
      topColor: [false, false, false],
      garland: [false, false, false, false],
      flower: [false, false, false, false],
      carColor: '',
      carWindow: '',
      carKaqian: '',
      carHub: '',
      carGlass: '',
      carFlower: '',
    };
  }

  _goBack() {
    this.props.navigator.pop();
  }

  // 场景
  _sceneSelect(index, data) {
    const arr = [];
    for (let i = 0; i < 3; i += 1) {
      arr.push(false);
    }
    arr[index] = true;
    this.setState({ scene: arr });
    this.sendSenceToWeb(data.vaule);
  }

  _skylightSelect(index, data) {
    const arr = [];
    for (let i = 0; i < 2; i += 1) {
      arr.push(false);
    }
    arr[index] = true;
    this.setState({ skylight: arr });
    this.setState({ carWindow: data.text });
  }

  _calliperSelect(index, data) {
    const arr = [];
    for (let i = 0; i < 2; i += 1) {
      arr.push(false);
    }
    arr[index] = true;
    this.setState({ callipers: arr });
    this.setState({ carKaqian: data.text });
  }

  // 轮毂
  _hubSelect(index, data) {
    const arr = [];
    for (let i = 0; i < 2; i += 1) {
      arr.push(false);
    }
    arr[index] = true;
    this.setState({ hub: arr });
    this.setState({ carHub: data.text });
    this.sendHubToWeb(data.value);
  }

  _glassSelect(index, data) {
    const arr = [];
    for (let i = 0; i < 2; i += 1) {
      arr.push(false);
    }
    arr[index] = true;
    this.setState({ glass: arr });
    this.setState({ carGlass: data.text });
    this.sendGlassToWeb(data.value);
  }

  // 车身颜色
  _colorButtonSelect(index, color) {
    const arr = [];
    for (let i = 0; i < 3; i += 1) {
      arr.push(false);
    }
    arr[index] = true;
    this.setState({ colorButton: arr });
    this.setState({ carColor: color.text });
    this.sendColorToWeb(color.colorid);
  }

  // 车身颜色
  sendColorToWeb(value) {
    if (ws) {
      ws.send(JSON.stringify({ colorid: value }));
    }
  }

 // 轮毂
  sendHubToWeb(value) {
    if (ws) {
      ws.send(JSON.stringify({ wheelhub: value }));
    }
  }

  // 隐私玻璃
  sendGlassToWeb(value) {
    if (ws) {
      ws.send(JSON.stringify({ glass: value }));
    }
  }

  // 场景
  sendSenceToWeb(value) {
    if (ws) {
      ws.send(JSON.stringify({ sence: value }));
    }
  }

  // 车纹理
  sendCarflowerToWeb(value) {
    if (ws) {
      ws.send(JSON.stringify({ carflower: value }));
    }
  }

  _topColorSelect(index) {
    const arr = [];
    for (let i = 0; i < 3; i += 1) {
      arr.push(false);
    }
    arr[index] = true;
    this.setState({ topColor: arr });
  }

  _garlandSelect(index) {
    const arr = [];
    for (let i = 0; i < 4; i += 1) {
      arr.push(false);
    }
    arr[index] = true;
    this.setState({ garland: arr });
  }

  _flowerSelect(index, data) {
    const arr = [];
    for (let i = 0; i < 4; i += 1) {
      arr.push(false);
    }
    arr[index] = true;
    this.setState({ flower: arr });
    this.setState({ carFlower: data.text });
    this.sendCarflowerToWeb(data.value);
  }

  render() {
    return (
      <View style={[styles.flex, styles.bgColor, styles.titleTop]}>
        <NavCon currentTitle="车辆改装" onPress={() => this._goBack()} />
        <ScrollView>
          <View style={[styles.titleWrapper]}>
            <Text style={[styles.title]}>场景切换</Text>
          </View>
          <View style={[styles.row, styles.sceneArea]}>
            {
            scenes.map((scene, index) => (
              <Scene
                key={scene.id}
                sceneName={scene.text}
                selected={this.state.scene[index]}
                onPress={() => this._sceneSelect(index, scene)}
              />
            ))
          }
          </View>
          <View style={[styles.titleWrapper]}>
            <Text style={[styles.title]}>外观</Text>
          </View>
          <View style={[styles.apperance]}>

            <View style={styles.row}>
              <Text style={[styles.subTitle]}>车身颜色</Text>
              {
                this.state.carColor
                ?
                  <Text>--{this.state.carColor}</Text>
                :
                null
              }
            </View>
            <View style={[styles.row, styles.subArea]}>
              {
              colors.map((color, index) => (
                <ColorButton
                  key={color.id}
                  bgColor={color.value}
                  selected={this.state.colorButton[index]}
                  onPress={() => this._colorButtonSelect(index, color)}
                />
            ))
            }
            </View>
            <View style={styles.row}>
              <Text style={[styles.subTitle]}>天窗</Text>
              {
                this.state.carWindow
                ?
                  <Text>--{this.state.carWindow}</Text>
                :
                null
              }

            </View>
            <View style={[styles.row, styles.subArea, styles.subSky]}>
              {
              skylights.map((skylight, index) => (
                <Skylight
                  key={skylight.id}
                  sceneName={skylight.text}
                  skyImg={skylight.img}
                  selected={this.state.skylight[index]}
                  onPress={() => this._skylightSelect(index, skylight)}
                />
              ))
            }
            </View>
            <View style={styles.row}>
              <Text style={[styles.subTitle]}>卡钳</Text>
              {
                this.state.carKaqian
                ?
                  <Text>--{this.state.carKaqian}</Text>
                :
                null
              }
            </View>
            <View style={[styles.row, styles.subArea, styles.subSky]}>
              {
              callipers.map((item, index) => (
                <Skylight
                  key={item.id}
                  sceneName={item.text}
                  skyImg={item.img}
                  selected={this.state.callipers[index]}
                  onPress={() => this._calliperSelect(index, item)}
                />
              ))
            }
            </View>
            <View style={styles.row}>
              <Text style={[styles.subTitle]}>轮毂</Text>
              {
                this.state.carHub
                ?
                  <Text>--{this.state.carHub}</Text>
                :
                null
              }
            </View>
            <View style={[styles.row, styles.subArea, styles.hub]}>
              {
              hub.map((item, index) => (
                <Skylight
                  key={item.id}
                  sceneName={item.text}
                  skyImg={item.img}
                  selected={this.state.hub[index]}
                  onPress={() => this._hubSelect(index, item)}
                />
              ))
            }
            </View>
            <View style={styles.row}>
              <Text style={[styles.subTitle]}>隐私玻璃</Text>
              {
                this.state.carGlass
                ?
                  <Text>--{this.state.carGlass}</Text>
                :
                null
              }
            </View>
            <View style={[styles.row, styles.subArea, styles.hub]}>
              {
              glass.map((item, index) => (
                <Skylight
                  key={item.id}
                  sceneName={item.text}
                  skyImg={item.img}
                  selected={this.state.hub[index]}
                  onPress={() => this._glassSelect(index, item)}
                />
              ))
            }
            </View>
            <View style={styles.row}>
              <Text style={[styles.subTitle]}>车纹理</Text>
              {
                this.state.carFlower
                ?
                  <Text>--{this.state.carFlower}</Text>
                :
                null
              }
            </View>
            <View style={[styles.row, styles.subArea, styles.subSky]}>
              {
              flower.map((item, index) => (
                <Skylight
                  key={item.id}
                  sceneName={item.text}
                  skyImg={item.img}
                  selected={this.state.flower[index]}
                  onPress={() => this._flowerSelect(index, item)}
                />
              ))
            }
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  bgColor: {
    backgroundColor: '#fff',
  },
  titleWrapper: {
    justifyContent: 'center',
    width: '100%',
    height: PxToDp(38),
    paddingLeft: PxToDp(22),
    backgroundColor: '#f4f5fb',
  },
  title: {
    color: '#555',
    fontSize: PxToDp(18),
  },
  sceneArea: {
    width: '100%',
    height: PxToDp(88),
    paddingTop: PxToDp(24),
    paddingLeft: PxToDp(22),
  },
  scene: {
    justifyContent: 'center',
    alignItems: 'center',
    width: PxToDp(66),
    height: PxToDp(30),
    marginRight: PxToDp(14),
    borderStyle: 'solid',
    borderWidth: PxToDp(1),
    borderRadius: PxToDp(3),
  },
  apperance: {
    paddingLeft: PxToDp(22),
    paddingTop: PxToDp(24),
  },
  subTitle: {
    marginBottom: PxToDp(20),
    color: '#262626',
    fontSize: PxToDp(18),
  },
  subArea: {
    height: PxToDp(48),
    marginBottom: PxToDp(18),
    paddingBottom: PxToDp(18),
    borderStyle: 'solid',
    borderColor: '#ddd',
    borderBottomWidth: 1,
  },
  cbBorder: {
    justifyContent: 'center',
    alignItems: 'center',
    width: PxToDp(66),
    height: PxToDp(30),
    marginRight: PxToDp(14),
    borderStyle: 'solid',
    borderWidth: PxToDp(1),
    borderRadius: PxToDp(3),
    flexWrap: 'wrap',
  },
  colorShow: {
    width: PxToDp(55),
    height: PxToDp(22),
  },
  subSky: {
    height: PxToDp(105),
  },
  hub: {
    height: PxToDp(105),
  },
  right: {
    marginRight: PxToDp(14),
  },
  top: {
    marginTop: PxToDp(10),
  },
  car: {
    height: PxToDp(45),
    width: PxToDp(66),
  },
  titleTop: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
});

export default SwitchSettings;
